<script setup>
import { Head } from '@inertiajs/vue3'
import { computed } from 'vue'
import SpotlightLayout from '@/Layouts/SpotlightLayout.vue'
import Container from '@/Components/Spotlight/Container.vue'
import SpeakingSection from '@/Components/Spotlight/SpeakingSection.vue'
import Appearance from '@/Components/Spotlight/Appearance.vue'
import Pagination from '@/Components/UI/Pagination.vue'
import { formatDate } from '@/Components/Spotlight/utils/formatDate.js'
import PageHero from '@/Components/Spotlight/PageHero.vue'

const props = defineProps({
  series: {
    type: Object,
    required: true,
  },
  filters: {
    type: Object,
    default: () => ({}),
  },
})

const intro = '探索我们的系列专栏，系统地学习一个主题，循序渐进地掌握核心知识。'

const seriesList = computed(() => props.series.data || [])
</script>

<template>
  <SpotlightLayout title="系列文章">
    <Head title="系列文章" />

    <Container class="mt-16 sm:mt-24">
      <PageHero
        title="系统学习的最佳路径。"
        :description="intro"
      />
    </Container>

    <Container class="mt-20 space-y-24">
      <SpeakingSection title="精选系列">
        <template v-if="seriesList.length">
          <Appearance
            v-for="item in seriesList"
            :key="item.id"
            :href="route('blog.series.show', item.slug, false)"
            :title="item.name"
            :description="item.description || '作者正在撰写更完整的介绍，敬请期待。'"
            :event="`${item.post_count || 0} 篇文章 · 最后更新 ${formatDate(item.updated_at || item.created_at)}`"
            cta="查看系列"
          />
        </template>
        <p v-else class="text-sm text-zinc-500 dark:text-zinc-400">
          暂无系列内容，稍后再来看看吧。
        </p>
      </SpeakingSection>

      <div v-if="series.links?.length > 1" class="flex justify-center pt-16">
        <Pagination :links="series.links" />
      </div>
    </Container>
  </SpotlightLayout>
</template>
